<template>
    <div class="container" v-if="store.isAdd">
        <el-card style="max-width: 480px">
            <template #header>
                <div class="card-header">
                    <span>Card name</span>
                </div>
            </template>
            <el-form label-width="auto" style="max-width: 600px">
                <el-form-item label="肇事人">
                    <el-input placeholder="请输入肇事人姓名" v-model.trim="store.event_name" />
                </el-form-item>
                <el-form-item label="肇事地区">
                    <el-input v-model.trim="store.event_area" placeholder="请输入肇事地区" />
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-input v-model.trim="store.event_car_num" placeholder="请输入肇事车牌号" />
                </el-form-item>
                <el-form-item label="事故类型">
                    <el-select placeholder="请选择事故类型" v-model="store.event_type">
                        <el-option label="刮差" value="刮差" />
                        <el-option label="碰撞" value="碰撞" />
                        <el-option label="翻车" value="翻车" />
                        <el-option label="着火" value="着火" />
                        <el-option label="其他" :value="store.otherEvent" />
                    </el-select>
                </el-form-item>
                <el-form-item label="肇事日期">
                    <el-col :span="11">
                        <el-date-picker v-model="store.dateYMD" type="date" placeholder="选择日期" style="width: 100%" />
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-time-picker v-model="store.dateTime" placeholder="选择时间" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <div class="btn">
                        <el-button type="primary" @click="addPointOK">确认提交</el-button>
                        <el-button type="danger" @click="cancel">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup>
import { mapStore } from '@/store';
import { event } from '@/hooks/eventHook';
const { addPointOK } = event()
const store = mapStore()

const cancel = () => {
    store.isAdd = false
}
</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 20%;
    left: 30%;
    z-index: 1000;

    .btn {
        margin: auto;
    }
}
</style>
